<template>
  <div class="monitor_page">
    <!-- table -->
    <el-card
      class="monitor_page-left"
      :class="{ toggle: isToggleStatus }"
      shadow="always">
      <div class="filter_header">
        <el-form ref="form" label-width="100px">
          <div class="monitor_page-filter" v-show="!isToggleStatus">
            <el-form-item label="起止时间：">
              <el-date-picker
                style="width: 100%; min-width: 240px"
                size="small"
                value-format="timestamp"
                v-model="timerArray"
                type="datetimerange"
                :picker-options="pickerOptions"
                :clearable="false"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="monitor_page-filter flex-between filter_select" v-show="!isToggleStatus">
            <el-form-item label="过滤类型：" style="margin-right: 20px">
              <el-select
                v-model.trim="calcTypeModel"
                size="small"
                @change="typeChange">
                <el-option
                  v-for="item in typeOneUmumList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="过滤条件：" style="margin-right: 20px">
              <el-select v-model.trim="calcValModel" size="small">
                <el-option
                  v-for="item in detailList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <!--      类型筛选-->
          <div class="monitor_page-filter flex-between filter_select" v-show="!isToggleStatus">
            <el-form-item label="筛选条件：" style="margin-right: 20px">
              <el-select
                v-model.trim="compareTypeModel"
                size="small">
                <el-option
                  v-for="item in compareTypes"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="60px" label="数值：">
              <el-input clearable type="number" placeholder="可输入" v-model="compareValModel" size="small"
                        style="width: 60%">
              </el-input>
            </el-form-item>
          </div>
        </el-form>
        <div
          class="monitor_page-filter flex-between"
          :class="{ setMarginTop: isToggleStatus }">
          <div class="monitor_page-filter-left">
            <button class="toggle_wrap" @click="toggleStatus">
              <i class="el-icon-s-fold" :class="{ rotate: isToggleStatus }"></i>
            </button>
            <div v-show="!isToggleStatus">
              <el-button
                size="small"
                @click="confirmDelete"
                icon="el-icon-delete-solid"
                v-if="hasPermission('monitor:record:del')"
                type="danger">删除
              </el-button>
              <el-button
                size="small"
                plain
                v-if="hasPermission('monitor:record:clean')"
                icon="el-icon-s-tools"
                type="primary"
                @click="confirmCleanBaseRecord">设备重置
              </el-button>
              <el-button
                size="small"
                plain
                v-if="hasPermission('monitor:record:mark')"
                type="primary"
                @click="showMonitorRemarkDialog">说明
              </el-button>
              <el-button
                size="small"
                plain
                v-if="jiuGanKeJi"
                type="primary"
                @click="lookEquipRecord(timerArray,equipId)">运行日志
              </el-button>
              <el-button
                size="small"
                plain
                v-if="hasPermission('monitor:record:export')"
                @click="$emit('export')"
                icon="el-icon-download"
                type="primary">数据导出
              </el-button>
            </div>
          </div>
          <el-button
            v-show="!isToggleStatus"
            size="small"
            type="primary"
            class="common_btn-defalut"
            icon="el-icon-search"
            @click="form.page = 1;$emit('update');">搜索
          </el-button>
        </div>
      </div>
      <!-- table -->
      <el-table
        v-show="!isToggleStatus"
        :data="tableList"
        border
        height="650"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
        tooltip-effect="dark">
        <el-table-column  type="selection" width="28"></el-table-column>
        <el-table-column prop="createTime" label="数据采集时间" min-width="135">
          <template slot-scope="scope">
            {{ scope.row.createTime | formatTimer }}
          </template>
        </el-table-column>
        <el-table-column prop="depth" label="孔深(m)" min-width="50">
        </el-table-column>
        <el-table-column
          prop="maxValue"
          label="最大相对位移(mm)"
          min-width="100">
        </el-table-column>

      </el-table>
      <!-- 分页器 -->
      <el-pagination
        v-show="!isToggleStatus"
        :disabled="isToggleStatus"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="form.page"
        :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
        :page-size="form.pageSize"
        layout="sizes, prev, pager, next,jumper"
        :total="form.total">
      </el-pagination>

    </el-card>

    <!-- 绘图部分 -->
    <div class="monitor_page-right">
      <el-form>
        <el-form-item label-width="110px" label="绘图数据量" style="display: inline-block;width: 25%">
          <el-input-number size="small" v-model="form.pageSize" :max="50"  @change="changePageSize"></el-input-number>
        </el-form-item>
        <el-form-item label-width="110px" label="X坐标大小" style="display: inline-block;width: 35%">
          <el-input-number size="small" v-model="xNum" :min="5" ></el-input-number>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-edit"
            style="margin-left: 20px"
            @click="form.page = 1;$emit('update');">重新绘图
          </el-button>
        </el-form-item>
      </el-form>
      <el-tabs type="border-card" v-model="activeName" @tab-click="clickTab">
        <el-tab-pane label="合成方向相对位移" name="AB">
          <el-card class="card_echarts" shadow="hover">
            <echarts-one-compose
              @showDialog="showDialog"
              ref="EchartsOneAB"
              type="AB"
              :xNum="xNum"
            ></echarts-one-compose>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="AO方向相对位移" name="A0">
          <el-card class="card_echarts" shadow="hover">
            <echarts-one-compose
              @showDialog="showDialog"
              ref="EchartsOneAO"
              type="AO"
              :xNum="xNum"
            ></echarts-one-compose>
          </el-card
          >
        </el-tab-pane>
        <el-tab-pane label="BO方向相对位移" name="B0">
          <el-card class="card_echarts" shadow="hover">
            <echarts-one-compose
              @showDialog="showDialog"
              ref="EchartsOneBO"
              type="BO"
              :xNum="xNum"
            ></echarts-one-compose>
          </el-card
          >
        </el-tab-pane>
        <el-tab-pane label="X角度" name="xAngle" v-if="showTab">
          <el-card class="card_echarts" shadow="hover">
            <echarts-one-compose
              ref="xAngle"
              type="X"
              :xNum="xNum"
            ></echarts-one-compose>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="Y角度" name="yAngle" v-if="showTab">
          <el-card class="card_echarts" shadow="hover">
            <echarts-one-compose
              ref="yAngle"
              type="Y"
              :xNum="xNum"
            ></echarts-one-compose>
          </el-card
          >
        </el-tab-pane>
        <el-tab-pane label="三维曲线" name="xyz">
          <el-card class="card_echarts" shadow="hover">
            <echarts-pro
              ref="EchartsOneXYZ"
              type="XYZ"
              :xNum="xNum"
            ></echarts-pro>
          </el-card
          >
        </el-tab-pane>
        <el-tab-pane label="az" name="az" v-if="showTab">
          <el-card class="card_echarts" shadow="hover">
            <echarts-one-compose
              ref="az"
              type="az"
            ></echarts-one-compose>
          </el-card
          >
        </el-tab-pane>
        <el-tab-pane label="in" name="in" v-if="showTab">
          <el-card class="card_echarts" shadow="hover">
            <echarts-one-compose
              ref="in"
              type="in"
            ></echarts-one-compose>
          </el-card
          >
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 新增编辑弹窗 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="isShowDialog"
      :before-close="handleClose"
      :close-on-click-modal="false">
      <echarts-one-dialog ref="echartsDialog"></echarts-one-dialog>
    </el-dialog>
    <monitor-remark ref="monitorRemark" @update="$emit('update')"></monitor-remark>
  </div>
</template>

<script>
import "echarts-gl";
import EchartsOneDialog from "../monitor-echarts/base/echarts-1-dialog";
import {sbwyDepth} from "@/services/model/project-info";
import EchartsOneCompose from "../monitor-echarts/base/echarts-1-compose";
// import EchartsOneDynamic from "../monitor-echarts/echarts-1-dynamic";
import ItemMixins from "./item.mixins";
import EchartsPro from "../monitor-echarts/base/echarts-1-3D";

export default {
  mixins: [ItemMixins],
  components: {
    EchartsOneCompose, EchartsPro, EchartsOneDialog,
    // EchartsOneDynamic

  },
  props: ["typeOneUmumList", "calcType", "calcVal", 'compareType', 'compareVal', 'compareTypes',],
  data() {
    return {
      xNum:30,
      isEcharts: 0,
      activeName: "AB",

      // 当前的图表钩子
      chartsName: ["EchartsOneAB", "EchartsOneAO", "EchartsOneBO", "yAngle", "xAngle", 'in', 'az'],
      // 分页参数
      form: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      // 弹窗title
      dialogTitle: "",
      // 是否显示弹窗
      isShowDialog: false,
    };
  },

  computed: {
    //展示相应的tab
    showTab() {
      return this.$store.state.userInfo.organizationName === '北京久感科技有限公司' || this.$store.state.userInfo.organizationName === '久感监测'
    },
    compareValModel: {
      get() {
        return this.compareVal;
      },
      set(value) {
        this.$emit("update:compareVal", value);
      },
    },
    compareTypeModel: {
      get() {
        return this.compareType;
      },
      set(value) {
        this.$emit("update:compareType", value);
      },
    },
    // 筛选类型改变
    detailList() {
      return (
        this.typeOneUmumList.find((x) => x.code === this.calcTypeModel)
          ?.relationTypeList || []
      );
    },
    calcTypeModel: {
      get() {
        return this.calcType;
      },
      set(value) {
        this.$emit("update:calcType", value);
      },
    },
    calcValModel: {
      get() {
        return this.calcVal;
      },
      set(value) {
        this.$emit("update:calcVal", value);
      },
    },
  },
  methods: {
    setWarningLine() {
    },
    //
    //tab 切换进行echart随着窗口改变方法，让数据重新渲染，
    clickTab() {
      if (this.$refs.EchartsOneXYZ) {
        this.$nextTick(() => {
          this.$refs.EchartsOneXYZ.echartResize();
          // this.$refs.EchartsOneDynamic.echartResize()
        });
      }

      this.chartsName.map((name) => {
        if (this.$refs[name]) {
          this.$nextTick(() => {
            this.$refs[name].echartResize();
          });
        }
      });

    },
    // type cpmpose 合成位移  AO    BO
    async showDialog({params, type}) {
      if (params.name === "markLine") return; /* 标识线 */
      let depth = params.name;
      const titleMap = {
        AB: "合成方向",
        AO: "A0方向",
        BO: "B0方向",
      };
      this.dialogTitle =
        titleMap[type] + "孔深" + depth + "m" + "-时间相对位移曲线";
      const {data} = await sbwyDepth({depth, pointId: this.monitorInfo.id});
      this.isShowDialog = true;

      this.$nextTick(() => {
        this.$refs.echartsDialog.updateEchart(
          data,
          type,
          titleMap[type],
          depth
        );
      });
    },
    // 筛选类型改变
    typeChange(value) {
      this.$nextTick(() => {
        this.calcValModel = this.detailList[0]?.code;
      });
    },
    // 数据刷新
    update({data, holeDepth, monitorInfo}) {
      this.equipId = monitorInfo.bindEquipId
      this.collectionList = data.recordList || []
      this.form.page = 1;
      this.form.total = this.collectionList.length;
      this.selectionList = JSON.parse(JSON.stringify(this.tableList));
      if (this.$refs.dynamic) {
        this.$nextTick(() => {
          this.$refs.dynamic.updateEchart(this.selectionList, holeDepth, monitorInfo.lithologyList);
        });
      }
      if (this.$refs.EchartsOneXYZ) {
        this.$nextTick(() => {
          this.$refs.EchartsOneXYZ.updateEchart(this.selectionList, holeDepth);
        });
      }
      this.chartsName.map(async (name) => {
        // holeDepth  当操作数据更新时，this.monitorInfo 可能未拿到值 所以通过传递
        if (this.$refs[name]) {
          this.$nextTick(() => {
            this.$refs[name].updateEchart(this.selectionList, holeDepth, monitorInfo.lithologyList);

          });
        }
      });
      if (this.$refs.multipleTable) {
        this.$nextTick(() => {
          this.$refs.multipleTable.toggleAllSelection();
        });
      }
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val;
      if (this.$refs.multipleTable) {
        this.$nextTick(() => {
          this.$refs.multipleTable.toggleAllSelection();
        });
      }
    },

    // 当前数量改变
    handleSizeChange(val) {
      this.form.pageSize = val;
      if (this.$refs.multipleTable) {
        this.$nextTick(() => {
          this.$refs.multipleTable.toggleAllSelection();
        });
      }
    },
    changePageSize(){
      this.$refs.multipleTable.toggleAllSelection();
      this.partUpdateChart();
    },
    // 勾选改变
    handleSelectionChange(val) {
      this.selectionList = val;
      this.partUpdateChart();
    },
    partUpdateChart() {
      if (this.$refs.EchartsOneXYZ) {
        this.$nextTick(() => {
          this.$refs.EchartsOneXYZ.updateEchart(this.selectionList,
            this.monitorInfo.holeDepth);
        });
      }
      this.chartsName.map((name) => {
        if (this.$refs[name]) {
          this.$refs[name].updateEchart(
            this.selectionList,
            this.monitorInfo.holeDepth,
            this.monitorInfo.lithologyList
          );
        }
      });
    },
    handleClose() {
      this.isShowDialog = false;
    },
  },

};
</script>

<style scoped="scoped" lang="less">
  @import url("./commom.less");

  // 还需自定义的css
  .card_echarts {
    height: 800px;
  }

  .monitor_page-left {
    // 15px未margin
    /*height: 1530px;*/
    height: 980px;

  }

</style>
